<template>
  <div class="report-template" ref="reportRef">
    <div class="report-header">
      <div class="header-content">
        <h2>检验结果报告单</h2>

        <div class="qrcode-container">
          <div v-if="data.qrUrl" class="qr-code">
            <QRCodeVue3
              :value="data.qrUrl"
              :width="100"
              :height="100"
              :dotsOptions="{
                color: '#000',
                type: 'rounded'
              }"
            />
            <img :src="data.qrUrl" alt="" />
            <div class="qr-code-text">扫码查看报告 </div>
          </div>
        </div>
      </div>
      <div class="report-info">
        <div class="info-row">
          <span>单据编号:{{ data.voucherNum }}</span>
          <span>报告时间：{{ data.reportDate }}</span>
         
        </div>
        <div class="info-row">
          <span>样品名称：{{ data.sampleName }}</span>
        
          <span>样品编号：{{ data.sampleNum }}</span>
        </div>

        <div class="info-row">
          <span>执行标准:{{ data.executiveStandard }}</span>
          <span>规格型号：{{ data.model }}</span>
        </div>
        <div class="info-row">
          <span>抽样地点：{{ data.samplingSite }}</span>
          <span>抽样时间：{{ data.samplingDate }}</span>
          <span>检验时间：{{ data.checkStartTime }}</span>
        </div>

        <div class="info-row">
          <!-- <span>抽样地点：{{ data.samplingSite }}</span> -->
          <span>抽样时间：{{ data.samplingDate }}</span>
          <span>检验时间：{{ data.checkStartTime }}</span>
        </div>

        <div class="info-row">
          <!-- <span>抽样地点：{{ data.samplingSite }}</span> -->
          <!-- <span>抽样时间：{{ data.samplingDate }}</span> -->
          <span>检验时间：{{ data.checkStartTime }}</span>
        </div>

        <div class="info-row">
          <span>承检单位：{{ data.orgName }}</span>
          <span>实验室名称：{{ data.labName }}</span>
        </div>
      </div>
    </div>

    <div class="report-body">
      <!-- <table class="inspection-table">
        <thead>
          <tr>
            <th>检测项目</th>
            <th>单位</th>
            <th>设计要求</th>
            <th>检测结果</th>
            <th>单项判定</th>
            <th>执行标准</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data.checkResultList" :key="index">
            <td>{{ item.checkProject }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.designRequire }}</td>
            <td>{{ item.checkResult }}</td>
            <td>{{ item.singleDecision }}</td>
            <td>{{ item.sdandardType }}</td>
            <td>{{ item.remark }}</td>
          </tr>
        </tbody>
      </table> -->

      <el-table :data="data.checkResultList" border style="width: 100%">
        <el-table-column prop="checkProject" label="检测项目" />

        <el-table-column prop="unit" label="单位" />

        <el-table-column prop="designRequire" label="设计要求" width="100" />

        <el-table-column prop="checkResult" label="检测结果" />

        <el-table-column prop="singleDecision" label="单项判定" />

        <el-table-column prop="executeStandardName" label="执行标准" />

        <el-table-column prop="remark" label="备注" />
      </el-table>
    </div>

    <div class="report-footer">
      <span>检验结论：{{ data.checkConclusion }}</span>
      <span>备注：{{ data.requireRemark }}</span>
    </div>

    <QRCodeVue3
      :value="data.qrUrl"
      :width="100"
      :height="100"
      :dotsOptions="{
        color: '#000',
        type: 'rounded'
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import QRCodeVue3 from 'qrcode-vue3'

const props = defineProps<{
  data: {
    serialNo: string
    reportTime: string
    sampleNo: string
    standard: string
    samplingLocation: string
    inspectionUnit: string
    qrCodeUrl: string
    items: Array<{
      name: string
      unit: string
      requirement: string
      result: string
      judgment: string
      standard: string
      remark: string
    }>
    conclusion: string
    remark: string
  }
}>()

const reportRef = ref(null)

const qrCodeCallback = () => {
  console.log('qrCodeCallback')
}

defineExpose({
  reportRef
})

onMounted(() => {
  console.log(props.data)
})
</script>

<style lang="scss" scoped>
.report-template {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);

  .report-header {
    margin-bottom: 20px;
    text-align: center;

    .header-content {
      position: relative;
      margin-bottom: 20px;

      h2 {
        margin-bottom: 20px;
      }

      .qrcode-container {
        position: absolute;
        top: -40px;
        right: -40px;

        .qr-code {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px;
          background: white;
          border: 1px solid #eee;
          border-radius: 4px;

          .qr-code-text {
            margin-top: 5px;
            font-size: 12px;
            color: #666;
          }
        }
      }
    }

    .report-info {
      text-align: left;

      .info-row {
        display: flex;
        margin: 10px 0;
        gap: 40px;
      }
    }
  }

  .inspection-table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;

    th,
    td {
      padding: 8px;
      text-align: center;
      border: 1px solid #000;
    }

    th {
      background-color: #f5f5f5;
    }
  }

  .report-footer {
    margin: 0 auto;
    margin-top: 20px;
    font-weight: 700;


    p {
      margin: 10px 0;
    }
  }
}
</style>
